import React, { useEffect, useRef, useState } from 'react';
import './App.css';
import useWebsocket from './useWebsocket';

function App() {
  const { sendMsg, data } = useWebsocket('ws://localhost:8080');
  const myinput = useRef<any>(null);
  // const ws = new WebSocket('ws://localhost:8080');
  const send = () => {
    console.log(222, myinput.current.value);

    // ws.send(myinput.current.value);
    sendMsg(myinput.current.value);
    myinput.current.value = '';

  }
  const [list, setList] = useState<Array<string>>([]);
  // ws.addEventListener('message', function message(e) {
  //   console.log('received: %s', e.data);
  //   list.push(e.data);
  //   setList([...list]);
  // });
  useEffect(() => {
    // console.log(data);
    list.push(data);
    setList([...list]);
  }, [data])
  return (
    <div className="App">
      <div className='chat'>
        {
          list.map((item: any, index: number) => {
            return <div key={index}>{item}</div>;
          })
        }
      </div>
      <div>
        <input ref={myinput} type="text" />
        <button onClick={send}>发送</button>
      </div>
    </div>
  );
}

export default App;